<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <title>我的电子证件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <link rel="stylesheet" href="/css/weui.min.css"/>
    <link rel="stylesheet" href="/css/weuix.css"/>  
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        header{
            width: 100%;
        }
        header img{
            width: 100%;
        }
        .weui-c-title{
            font-size: 15px;
            color: rgba(0, 0, 0, 0.6);
            font-weight: bold;
        }
        span{
            padding: 3px;
            font-size: 20px;
        }
        .weui-c-article{
            text-align: center;
            color: green;
        }
        #qrcode{
            padding-top: 15px;
        }
        </style>
</head>
<body ontouchstart> 
    <header><img th:src="${banner}"></header>
    <div class="weui-content">
        <div class="weui-c-inner">
            <div class="weui-c-content">
                <h4 th:if="${hasCode}" class="weui-c-title">电子证件二维码</h4>
                <div class="weui-c-article" >
                    <p id="qrcode">

                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-footer weui-footer_fixed-bottom">
        <p class="weui-footer__text">Copyright &copy; 广东慧展科技有限公司</p>
    </div>
    <script src="/js/jquery.js"></script>
    <script src="/js/zepto.min.js"></script>
    <script src="/js/zepto.weui.js"></script>
    <script src="/js/qrcode.min.js"></script>
    <script>
        $(function () {
            if([[${hasCode}]]){
                var qrcode = new QRCode("qrcode", {
                text: "[[${code}]]",
                width: $(window).width() * 0.5,
                height: $(window).width() * 0.5,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
                });
                $("#qrcode").after("<p><h4>[[${code}]]</h4><p>")
            }else{
                $("#qrcode").html("<h4 style='color:red'>您还没有电子证件</h4><br/><h4><a href='javascript:add()'>点击创建证件</a></h4>")
           }
        })

        function add(){
            $.showLoading();
            $.ajax({
                url:'/api/Distribute/[[${id}]]',
                type:'patch',
                success:function(result){
                    if(result.hasError){
                        $.toast(result.message, "cancel");
                    }else{
                        $.hideLoading();
                        $.toast("创建成功","success");
                        location.reload();
                    }
                },error:function(){
                    $.hideLoading();
                    $.toast("创建失败", "cancel");
                }})
        }
    </script>
</body>
</html>